<template>
    <div class="all">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/mpage/pmanage' }">点我跳转主页</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="box1">
            <div class="top">
                <span class="sp1">项目基础信息</span>
                <button @click="btn1">编辑</button>
            </div>
            <div class="bottom">
                <div class="first">
                    <span>项目编码：{{ datafin.code }}</span>
                    <span>项目名称：{{ datafin.item }}</span>
                    <span>项目分类：{{ datafin.classify }}</span>
                    <span>建设性质：{{ datafin.properties }}</span>
                </div>
                <div class="second">
                    <span class="sec1">项目所在地：{{ datafin.location }}</span>
                    <span class="sec2">总投资：{{ datafin.inves }}</span>
                    <span class="sec3">总面积:{{ datafin.area }}</span>
                    <span class="sec4">开工日期：{{ datafin.begin }}</span>
                </div>
                <div class="third">
                    <span>竣工日期：{{ datafin.end }}</span>
                    <span>联系人姓名：{{ datafin.addresser }}</span>
                    <span>联系人电话：{{ datafin.phone }}</span>
                    <span>项目状态：{{ datafin.state }}</span>
                </div>
                <div class="four">
                    <span>项目地址：{{ datafin.clo }}</span>
                </div>
                <div class="five">
                    <span>项目简介：{{ datafin.introduce }}</span>
                </div>
                <div class="six">
                    <span>项目封面：<img :src="datafin.img" alt=""></span>
                </div>
            </div>
        </div>

        <div class="box2">
            <div class="top1">
                <span>总承包单位信息</span>
                <button @click="btn2">编辑</button>
            </div>
            <div class="bottom1">
                <span>总承包单位名称：{{ datafin.gunit }}</span>
                <span>总承包单位统一社会信用代码：{{ datafin.gunitcode }}</span>
            </div>
        </div>

        <div class="box3">
            <div class="top1">
                <span>建设单位信息</span>
                <button @click="btn3">编辑</button>
            </div>
            <div class="bottom1">
                <div class="line1">
                    <span>建设单位名称：{{ datafin.unit }}</span>
                    <span>建设单位统一社会信用代码：{{ datafin.unitcode }}</span>
                </div>
                <div class="line2">
                    <span> 建设用地规划许可证编号：{{ datafin.llicence }}</span>
                    <span>建设工程规划许可证编号：{{ datafin.plicence }}</span>
                </div>
            </div>
        </div>
        <son1 :pro="id" v-if="isshow" @hide="visi" @upmydate="update"></son1>
        <son2 :pro="id" v-if="isshow1" @hide="visi1" @upmydate="update"></son2>
        <son3 :pro="id" v-if="isshow2" @hide="visi2" @upmydate="update"></son3>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref, reactive } from "vue";
import service from "../../utils/service"
import son1 from "./pinfoson1.vue"
import son2 from "./pinfoson2.vue"
import son3 from "./pinfoson3.vue"

const $route = useRoute();
let id = $route.query.id

const isshow = ref(false)
const isshow1 = ref(false)
const isshow2 = ref(false)

const btn1 = () => {
    isshow.value = true
}

const visi = () => {
    isshow.value = false
}

const update = () => {
    getdd();
}
const btn2 = () => {
    isshow1.value = true
}
const visi1 = () => {
    isshow1.value = false
}
const btn3 = () => {
    isshow2.value = true
}
const visi2 = () => {
    isshow2.value = false
}
interface mydata {
    "id": number,
    "code": number,
    "item": string,
    "classify": string,
    "properties": string,
    "location": string,
    "inves": string,
    "area": string,
    "begin": string,
    "end": string,
    "addresser": string,
    "phone": string,
    "state": string,
    "clo": string,
    "introduce": string,
    "img": string,
    "gunit": string,
    "gunitcode": number,
    "unit": string,
    "unitcode": number,
    "llicence": string,
    "plicence": string

}

const datafin = reactive<mydata>({
    "id": 0,
    "code": 0,
    "item": '',
    "classify": '',
    "properties": '',
    "location": '',
    "inves": '',
    "area": '',
    "begin": '',
    "end": '',
    "addresser": '',
    "phone": '',
    "state": '',
    "clo": '',
    "introduce": '',
    "img": '',
    "gunit": '',
    "gunitcode": 0,
    "unit": '',
    "unitcode": 0,
    "llicence": '',
    "plicence": ''
})

const getdd = () => {
    service({
        url: "http://localhost:3000/proinfo?id=" + id,
        method: "get"
    }).then((res) => {
        // console.log(res.data);
        datafin.id = res.data[0].num;
        datafin.code = res.data[0].code;
        datafin.item = res.data[0].item;
        datafin.classify = res.data[0].classify;
        datafin.properties = res.data[0].properties;
        datafin.location = res.data[0].location;
        datafin.inves = res.data[0].inves;
        datafin.area = res.data[0].area;
        datafin.begin = res.data[0].begin;
        datafin.end = res.data[0].end;
        datafin.addresser = res.data[0].addresser;
        datafin.phone = res.data[0].phone;
        datafin.state = res.data[0].state;
        datafin.clo = res.data[0].clo;
        datafin.introduce = res.data[0].introduce;
        datafin.img = res.data[0].img;
        datafin.gunit = res.data[0].gunit;
        datafin.gunitcode = res.data[0].gunitcode;
        datafin.unit = res.data[0].unit;
        datafin.unitcode = res.data[0].unitcode;
        datafin.llicence = res.data[0].llicence;
        datafin.plicence = res.data[0].plicence;
    })
}
getdd()



</script>

<style scoped>
.all {
    height: 100%;
}

.box1 {
    width: 90%;
    height: 300px;
    border: 1px solid black;
    margin: auto;
    margin-top: 30px;
}

.box1 .top {
    align-items: center;
    height: 40px;
    display: flex;
    border-bottom: 1px solid black;
    justify-content: space-between;
}

.box1 .top .sp1 {
    margin-left: 30px;
}

.box1 .top button {
    margin-right: 30px;
    width: 60px;
    border-radius: 15%;
    border: 1px solid gray;
}

.box1 .bottom .first {
    height: 35px;
    display: flex;
    align-items: center;
}

.box1 .bottom .first span {
    display: block;
    width: 25%;
    display: block;
    margin-left: 20px;
}

.box1 .bottom .second {
    height: 35px;
    display: flex;
    align-items: center;
}

.box1 .bottom .second span {
    display: block;
    display: block;
    width: 25%;
    margin-left: 20px;
}


.box1 .bottom .third {
    height: 35px;
    display: flex;
    align-items: center;
}

.box1 .bottom .third span {
    display: block;
    width: 25%;
    margin-left: 20px;
}

.box1 .bottom .four {
    margin-top: 5px;
    height: 35px;
    display: flex;
}

.box1 .bottom .four span {
    display: block;
    width: 35%;
    margin-left: 20px;
}

.box1 .bottom .five {
    height: 35px;
    display: flex;
    align-items: center;
}

.box1 .bottom .five span {
    display: block;
    margin-left: 20px;
}

.box1 .bottom .six {
    height: 35px;
    display: flex;
    align-items: center;
}

.box1 .bottom .six span {
    display: block;
    margin-left: 20px;
    margin-top: 40px;
}

.box1 .bottom .six span img {
    width: 80px;
    height: 80px;
}

.box2 {
    width: 90%;
    height: 150px;
    border: 1px solid black;
    margin: auto;
    margin-top: 30px;
}

.box2 .top1 {
    align-items: center;
    height: 40px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black;
}

.box2 .top1 span {
    margin-left: 30px;
}

.box2 .top1 button {
    margin-right: 30px;
    width: 60px;
    border-radius: 15%;
    border: 1px solid gray;
}

.box2 .bottom1 {
    display: flex;
    align-items: center;
}

.box2 .bottom1 span {
    display: block;
    margin-top: 45px;
    width: 50%;
    margin-left: 20px;
}

.box3 {
    width: 90%;
    height: 150px;
    border: 1px solid black;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}

.box3 .top1 {
    align-items: center;
    height: 40px;
    display: flex;
    border-bottom: 1px solid black;
    justify-content: space-between;
}

.box3 .top1 span {
    margin-left: 30px;
}

.box3 .top1 button {
    margin-right: 30px;
    width: 60px;
    border-radius: 15%;
    border: 1px solid gray;
}

.box3 .bottom1 .line1 {
    display: flex;
    height: 40px;
    width: 100%;
    align-items: center;
}

.box3 .bottom1 .line1 span {
    display: flex;
    width: 50%;
    align-items: center;
    margin-left: 20px;
}

.box3 .bottom1 .line2 {
    display: flex;
    height: 40px;
    align-items: center;
}

.box3 .bottom1 .line2 span {
    display: flex;
    width: 50%;
    align-items: center;
    margin-left: 20px;
}

.el-breadcrumb {
    font-size: 18px;
    color: black;
    display: block;
}

.ant-input {
    width: 500px;
}
</style>